<template>
  <jl-base>

    <jl-header>
      <mt-header title="登录单明细" :fixed="true">
        <i slot="left">
          <mt-button icon="back" @click="back"></mt-button>
        </i>
      </mt-header>
      <mt-navbar v-model="selected" class="mt35">
        <mt-tab-item id="base">基本信息</mt-tab-item>
        <mt-tab-item id="goods">商品信息</mt-tab-item>
      </mt-navbar>
    </jl-header>

    <jl-content style="height: calc(100% - 120px);!important; margin-top: 0px;">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="base">
          <div>
            <div class="w12">
              <div class="dld_title"><span>工程类型</span></div>
              <div class="dld_body">
                <template v-for="item in GCLX">
                  <button :class="{'xuan':formData.GCLX.value == item.value}" v-on:click="choseType(item)">
                    {{item.value}}
                  </button>
                </template>
              </div>
            </div>
            <div class="w12">

              <template v-if="formData.jlbh && !CGX_SHOW">
                <div class="dld_title">
                  <span>跟进列表</span>
                </div>
                <div class="dld_body">
                  <jl-from-textarea placeholder="跟进备注"
                                    v-model="formData.GC_GJQK "/>
                </div>
              </template>

              <div class="dld_title">
                <span>使用单位</span>
              </div>
              <div class="dld_body">
                <jl-from-input label="用户姓名" disabled v-text="formData.YHXM"/>
                <jl-from-input label="用户电话" disabled v-text="formData.YHDH"/>
                <jl-from-input label="单位名称" disabled v-text="formData.SYDW"/>
              </div>

              <div class="dld_title">
                <span>购买单位</span>
              </div>
              <div class="dld_body">
                <jl-from-input label="联系人" disabled v-text="formData.LXR"/>
                <jl-from-input label="联系电话" disabled v-text="formData.LXDH"/>
                <jl-from-input label="单位名称" disabled v-text="formData.GMDW"/>
                <jl-address v-model="formData.AZDZ1" label="地址"/>
                <jl-from-datepicker label="预计安装日期" required v-model="formData.YJAZRQ"/>
              </div>

              <div class="dld_title">
                <span>厂家资料</span>
              </div>
              <div class="dld_body">
                <jl-from-query label="经销商"
                               required
                               :text="formData.JXSMC"
                               type="query_bean"
                               sqlid="scm.ccgl.jhd.query.QueryWLDW_KHMC"
                               @ok="chooseJXS">
                  <div class='jl_form'>
                    <div class='jl_form_item bor_bottom'>
                      <span class='w04'>{WLDW01}</span>
                      <span class='w08 tr'>{WLDWMC}</span>
                      <span class='w12'>{LXDH}</span>
                      <i class='fa fa-angle-right'></i>
                    </div>
                  </div>
                </jl-from-query>
                <jl-from-input label="经销商电话" required disabled v-model="formData.JXSDH"/>
                <jl-from-button label="厂家业务员" :text="formData.GCGZR" required @click="chooseGCGZR"/>
                <jl-from-input label="厂家业务员电话" v-model="formData.GZRDH"/>
                <jl-from-input label="经销商业务员" v-model="formData.JXRLXR"/>
                <jl-from-input label="经销商业务员电话" v-model="formData.JXSLXDH"/>
                <jl-from-button label="工程用途" :text="formData.GCYT.value" required @click="chooseEngineerPurpose"/>
                <jl-from-textarea required placeholder="请输入工程描述" v-model="formData.GCMS"/>
                <jl-from-input label="面积" required v-model="formData.MJ"/>
                <jl-from-input label="匹数" required v-model="formData.PS"/>
                <jl-from-select label="是否团购工程" default-key="0" :options="{'0':'否','1':'是'}" v-model="formData.SFTGGC"/>
              </div>
            </div>

            <template v-for="(item,index) in formData.AZDZLB">
              <div class="w12">
                <div class="dld_title">
                  <span>安装地址（{{index + 1}}）</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="delAddress(index)"></i>
                </div>
                <div class="dld_body">
                  <jl-from-input label="联系人" required placeholder="请输入安装地址联系人" v-model="item.LXR"/>
                  <jl-from-input label="联系电话" required placeholder="请输入安装地址联系人电话" v-model="item.LXDH"/>
                  <jl-address label="安装地址" required
                              v-model="item.AZDZ"
                  />
                </div>
              </div>
            </template>
            <div class="dld_add mt10" v-if="!formData.jlbh" @click="addAddress">+ 添加安装地址</div>
            <div class="dld_add mt10" v-if="formData.jlbh && CGX_SHOW" @click="addAddress">+ 添加安装地址</div>
          </div>
        </mt-tab-container-item>

        <mt-tab-container-item id="goods">
          <div>
            <template v-for="(item,index) in formData.SPLB">
              <div class="w12">
                <div class="dld_title"><span>商品信息({{index+1}})</span>
                  <i class="fa fa-trash font_color font_size_large fr" @click="removeGoods(index)"></i>
                </div>
                <div class="dld_body">
                  <div class="jl_form">
                    <div class="jl_form_item bor_bottom">
                      <span class="w04"><em class="font_red">*</em>商品名称</span>
                      <span class="w08 tr">{{item['GCSPMC']}}</span>
                      <i class="fa fa-search-plus"></i>
                    </div>
                  </div>
                  <div class="jl_input">
                    <div class="jl_input_item pr10 bor_bottom">
                      <span class="w08">
                        <em class="font_red">*</em>申请数量
                      </span>
                      <nut-stepper
                        :value.sync="item.SQSL"
                        :min="1"
                      ></nut-stepper>
                    </div>
                  </div>
                  <jl-from-textarea required placeholder="请输入商品备注信息" v-model="item.BZ"/>
                </div>
              </div>
            </template>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
    </jl-content>
  </jl-base>
</template>

<script>

  export default {

    data() {
      return {
        selected: 'base',
      }
    },
    methods: {
      back() {
        this.$router.back();
      },
    }
  }
</script>

<style scoped>
</style>
